import React, { useEffect, useState } from 'react';
import { Card, Button, Alert, Spin } from 'antd';

interface ImageTestProps {}

const ImageTest: React.FC<ImageTestProps> = () => {
  const [testResult, setTestResult] = useState<string>('');
  const [loading, setLoading] = useState(false);
  const [imageData, setImageData] = useState<any>(null);

  const testImageObject = () => {
    setLoading(true);
    console.log('🧪 开始测试图片对象...');
    
    // 创建一个模拟的图片对象
    const mockImageObject = {
      value: '测试产品',
      image: ''
    };
    
    console.log('📋 模拟图片对象:', mockImageObject);
    console.log('🔍 对象类型检查:', typeof mockImageObject);
    console.log('🔍 是否有image属性:', mockImageObject.hasOwnProperty('image'));
    
    setImageData(mockImageObject);
    
    // 测试对象检测逻辑
    const isImageObject = typeof mockImageObject === 'object' && 
                         mockImageObject !== null && 
                         mockImageObject.hasOwnProperty('image');
    
    console.log('✅ 图片对象检测结果:', isImageObject);
    
    if (isImageObject) {
      setTestResult('✅ 图片对象检测成功！');
    } else {
      setTestResult('❌ 图片对象检测失败！');
    }
    
    setLoading(false);
  };

  const renderImageCell = (data: any) => {
    console.log('🎨 渲染图片单元格:', data);
    console.log('🔍 数据类型:', typeof data);
    
    if (typeof data === 'object' && data !== null && data.hasOwnProperty('image')) {
      console.log('🖼️ 检测到图片对象，开始渲染图片');
      return (
        <div style={{ textAlign: 'center' }}>
          <div>{data.value}</div>
          <img 
            src={data.image} 
            alt={data.value || '产品图片'} 
            style={{ 
              maxWidth: '100px', 
              maxHeight: '100px', 
              marginTop: '8px',
              border: '1px solid #d9d9d9',
              borderRadius: '4px'
            }} 
            onLoad={() => console.log('🎉 图片加载成功!')}
            onError={(e) => console.error('❌ 图片加载失败:', e)}
          />
        </div>
      );
    } else {
      console.log('📝 普通文本数据:', data);
      return <div>{String(data)}</div>;
    }
  };

  return (
    <div style={{ padding: '20px' }}>
      <Card title="🧪 图片对象测试" style={{ marginBottom: '20px' }}>
        <div style={{ marginBottom: '16px' }}>
          <Button type="primary" onClick={testImageObject} loading={loading}>
            测试图片对象
          </Button>
        </div>
        
        {testResult && (
          <Alert 
            message={testResult} 
            type={testResult.includes('成功') ? 'success' : 'error'} 
            style={{ marginBottom: '16px' }}
          />
        )}
        
        {imageData && (
          <Card title="渲染测试" size="small">
            <div style={{ border: '1px solid #f0f0f0', padding: '16px', borderRadius: '4px' }}>
              {renderImageCell(imageData)}
            </div>
          </Card>
        )}
      </Card>
    </div>
  );
};

export default ImageTest; 